<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
    <div class="bg-gray-50 min-h-[1024px]">
        <navigation></navigation>
        <div class="max-w-[1440px] mx-auto p-8">
            <header class="flex justify-between items-center mb-8">
                <h1 class="text-2xl font-semibold">能力评估中心</h1>
            </header>
            <div class="dashboard-grid">
                <aside class="bg-white rounded-xl p-6 h-fit shadow-sm">
                    <div class="flex flex-col items-center mb-6">
                        <div class="w-20 h-20 rounded-full overflow-hidden mb-4 border-4 border-white shadow-lg">
                            <img :src="avatarUrl" class="w-full h-full object-cover" />
                        </div>
                        <h3 class="text-lg font-medium">陈雅婷</h3>
                        <p class="text-gray-500 text-sm">高级产品经理</p>
                    </div>
                    <div class="space-y-6">
                        <div>
                            <div class="text-sm text-gray-500 mb-2">完成评估</div>
                            <div class="text-2xl font-semibold">12/15</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500 mb-2">平均得分</div>
                            <div class="text-2xl font-semibold text-primary">92.5</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500 mb-3">评估进度</div>
                            <el-progress :percentage="80" :show-text="false" class="progress-custom" />
                        </div>
                    </div>
                </aside>
                <main class="space-y-6">
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-medium">专业技能评估</h2>
                            <div ref="skillRadarRef" class="radar-chart"></div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div v-for="(skill, index) in professionalSkills" :key="index" class="assessment-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h3 class="font-medium mb-1">{{ skill.name }}</h3>
                                        <p class="text-sm text-gray-500">上次评估: {{ skill.lastAssessment }}</p>
                                    </div>
                                    <span class="text-lg font-semibold text-primary">{{ skill.score }}</span>
                                </div>
                                <el-button type="primary" class="w-full !rounded-button whitespace-nowrap" @click="toTopic('/assessmenttopic')">开始评估</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-sm">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-medium">软技能评估</h2>
                            <div ref="softSkillRadarRef" class="radar-chart"></div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div v-for="(skill, index) in softSkills" :key="index" class="assessment-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                                <div class="flex justify-between items-start mb-4">
                                    <div>
                                        <h3 class="font-medium mb-1">{{ skill.name }}</h3>
                                        <p class="text-sm text-gray-500">上次评估: {{ skill.lastAssessment }}</p>
                                    </div>
                                    <span class="text-lg font-semibold text-primary">{{ skill.score }}</span>
                                </div>
                                <el-button type="primary" class="w-full !rounded-button whitespace-nowrap">开始评估</el-button>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
</template>



<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { ElButton, ElProgress } from 'element-plus';
import navigation from "../../views/navigation.vue";

const avatarUrl = 'https://ai-public.mastergo.com/ai/img_res/7ee8d5a8ec5548feeb0225b12bac3576.jpg';
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const skillRadarRef = ref(null);
const softSkillRadarRef = ref(null);
let skillRadar = null;
let softSkillRadar = null;

const professionalSkills = [
    { name: '产品设计能力', lastAssessment: '2024-02-15', score: 95 },
    { name: '用户研究', lastAssessment: '2024-02-10', score: 88 },
    { name: '数据分析', lastAssessment: '2024-02-05', score: 92 }
];

const softSkills = [
    { name: '团队协作', lastAssessment: '2024-02-18', score: 90 },
    { name: '沟通能力', lastAssessment: '2024-02-12', score: 85 },
    { name: '领导力', lastAssessment: '2024-02-08', score: 88 }
];

const skillOption = {
    animation: false,
    radar: {
        indicator: [
            { name: '产品设计', max: 100 },
            { name: '用户研究', max: 100 },
            { name: '数据分析', max: 100 },
            { name: '项目管理', max: 100 },
            { name: '战略思维', max: 100 }
        ],
        radius: '60%',
        splitLine: {
            lineStyle: {
                color: '#E5E7EB'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#E5E7EB'
            }
        },
        axisLabel: {
            color: '#0000FF' // 蓝色字体
        }
    },
    series: [{
        type: 'radar',
        data: [{
            value: [95, 88, 92, 85, 90],
            name: '能力得分',
            areaStyle: {
                color: 'rgba(0, 102, 255, 0.2)'
            },
            lineStyle: {
                color: '#0066FF'
            },
            itemStyle: {
                color: '#0066FF'
            }
        }]
    }]
};

const softSkillOption = {
    animation: false,
    radar: {
        indicator: [
            { name: '团队协作', max: 100 },
            { name: '沟通能力', max: 100 },
            { name: '领导力', max: 100 },
            { name: '问题解决', max: 100 },
            { name: '创新思维', max: 100 }
        ],
        radius: '60%',
        splitLine: {
            lineStyle: {
                color: '#E5E7EB'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#E5E7EB'
            }
        },
        axisLabel: {
            color: '#0000FF' // 蓝色字体
        }
    },
    series: [{
        type: 'radar',
        data: [{
            value: [90, 85, 88, 92, 87],
            name: '能力得分',
            areaStyle: {
                color: 'rgba(0, 102, 255, 0.2)'
            },
            lineStyle: {
                color: '#0066FF'
            },
            itemStyle: {
                color: '#0066FF'
            }
        }]
    }]
};

const handleResize = () => {
    skillRadar?.resize();
    softSkillRadar?.resize();
};

onMounted(() => {
    if (skillRadarRef.value && softSkillRadarRef.value) {
        skillRadar = echarts.init(skillRadarRef.value);
        softSkillRadar = echarts.init(softSkillRadarRef.value);
        skillRadar.setOption(skillOption);
        softSkillRadar.setOption(softSkillOption);
    }
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    skillRadar?.dispose();
    softSkillRadar?.dispose();
});

function toTopic(path) {
    router.push({ path: path });
}
</script>

<style scoped>
    .dashboard-grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 24px;
    }

    .radar-chart {
        width: 100%;
        height: 260px;
    }

    .assessment-card {
        transition: transform 0.2s;
    }

    .assessment-card:hover {
        transform: translateY(-2px);
    }

    :deep(.progress-custom .el-progress-bar__outer) {
        background-color: #f3f4f6;
        height: 8px !important;
        border-radius: 9999px;
    }

    :deep(.progress-custom .el-progress-bar__inner) {
        background-color: #0066FF;
        border-radius: 9999px;
    }
</style>

